<template>
  <div class="zhuandan">
    <div class="center">
      <left></left>
      <div class="right">
        <top></top>
        <div class="hei10"></div>
        <div style="padding: 15px 30px;">
          <!-- <div class="mb20" style="font-size: 14px; ">在售商品管理 > <span style="color: rgb(19, 84, 255);">接口订单重提</span></div> -->
          <div class="mb20" style=" font-size: 20px; margin-bottom: 30px;"> <i class="el-icon-arrow-left" style="font-size: 20px; cursor: pointer; font-weight: bold;" @click="$router.back(-1)"></i> {{$route.query.name}}接口订单重提</div>

          <div class="flexc mb20">

            <el-select v-model="search.status" style="width: 300px;" clearable placeholder="请选择状态">
              <el-option :label="item.title" :value="item.value" v-for="(item,index) in statuslist" :key="item.value"></el-option>

            </el-select>

            <el-button @click="searchgo()" style="margin-left: 20px;" round type="primary">检索</el-button>

            <el-button @click="chongtiall()" style="margin-left: 20px;" round type="danger">批量重提</el-button>
          </div>
          <div class="mb20">

            <el-table :data="tableData" @selection-change="handleSelectionChange" border style="width: 100%">
                <el-table-column  type="selection" width="55"></el-table-column>
                <el-table-column  prop="order_id" label="订单ID"></el-table-column>
                <el-table-column  prop="created_at"  label="提单时间"></el-table-column>
                <el-table-column  prop="updated_at"  label="状态更新时间"></el-table-column>
                <el-table-column  prop="status_text"  label="提单状态">
                  <template slot-scope="scope">
                    
                    <div style="color: rgb(0, 158, 44);" v-if="scope.row.status_text == '成功'">{{scope.row.status_text}}</div>
                    <div style="color: rgb(251, 156, 0);" v-if="scope.row.status_text == '异常'">{{scope.row.status_text}}</div>
                    <div style="color: #2974FF;" v-if="scope.row.status_text == '失败'">{{scope.row.status_text}}</div>
                  </template>
                </el-table-column>
                <el-table-column  prop="memo"  label="失败&异常原因"></el-table-column>
                <el-table-column  label="操作">
                  <template slot-scope="scope">

                    <el-button @click="chongti(scope.row)" v-if="scope.row.resubmit_show == 1" type="text">重提</el-button>
                  </template>
                </el-table-column>
             </el-table>

             <el-pagination background layout="total,prev, pager, next, sizes"
             :page-sizes="[20, 50, 100, 200,1000]" @size-change="handleCurrentChange2" :current-page="search.page" @current-change="fanye"
             :page-size="search.page_size" :total="total" style="margin-top: 20px; text-align: right;"></el-pagination>
          </div>

        </div>
      </div>
    </div>

  </div>
</template>



<script>

  import axios from 'axios'
  import top from '@/components/top.vue'
  import left from '@/components/left.vue'
  export default {
    components: {
      "left": left,
      "top": top
    },
    name: 'productionBasismanagAItidan',
    data() {
      return {
        search:{
          channel_id:this.$route.query.id,
          page:1,
          page_size:20,
          status:""
        },
        tableData: [],
        total:0,
        ids:[],
        statuslist:[]
      }
    },
    created() {

      axios.get('/api/plan-market/upstream/channel/upstream/order/status')
      .then(response => {
        if (response.data.msg.code == 0) {
          this.statuslist = response.data.data
        } else {
          this.$message.error(response.data.msg.info);
        }
      })

      this.getlist()
    },
    mounted() {

    },
    methods: {
      chongtiall:function(){
        if(this.ids.length == 0){
          this.$message.success('请选择要提单的数据');
          return false
        }
        let arr = []
        this.ids.forEach((item)=>{
          arr.push(item.id)
        })

        axios.post('/api/plan-market/upstream/channel/upstream/order/resubmit',{channel_id:this.$route.query.id,ids:arr.toString()})
        .then(response => {
          if (response.data.msg.code == 0) {
            this.$message.success('操作成功');
            this.getlist()
          } else {
            this.$message.error(response.data.msg.info);
          }
        })
      },
      handleSelectionChange:function(val){
        this.ids = val
        console.log(this.ids)
      },

      chongti:function(item){
        axios.post('/api/plan-market/upstream/channel/upstream/order/resubmit',{channel_id:this.$route.query.id,ids:item.id})
        .then(response => {
          if (response.data.msg.code == 0) {
            this.$message.success('操作成功');
            this.getlist()
          } else {
            this.$message.error(response.data.msg.info);
          }
        })
      },
      handleCurrentChange2:function(val){
        this.search.page = 1
        this.search.page_size = val
        this.getlist()
      },
      fanye:function(page){
      	this.search.page = page
      	this.getlist()
      },
      searchgo:function(){
        this.page = 1
        this.getlist()
      },
      getlist:function(){
         axios.get('/api/plan-market/upstream/channel/upstream_orders',{params:this.search})
         .then(response => {
           if (response.data.msg.code == 0) {
             this.tableData = response.data.data.list
             this.total = response.data.data.count
           } else {
             this.$message.error(response.data.msg.info);
           }
         })
      }
    }

  }
</script>

<style lang="scss" scoped>
  /deep/ .el-button--danger {
      color: #FFF;
      background-color: #2974FF;
      border-color: #2974FF;
  }
  /deep/ .el-pagination.is-background .btn-prev:disabled{ background: rgba(246, 246, 246, 0.3); border: 1px rgba(167, 167, 167, 0.3) solid;}
  /deep/ .el-pagination.is-background .btn-next:disabled{ background: rgba(246, 246, 246, 0.3); border: 1px rgba(167, 167, 167, 0.3) solid;}
  /deep/ .el-pagination.is-background .btn-next{ background: rgba(246, 246, 246,1); border: 1px rgba(167, 167, 167,1) solid;}
  /deep/ .el-pagination.is-background .btn-prev{ background: rgba(246, 246, 246,1); border: 1px rgba(167, 167, 167,1) solid;}
  /deep/ .el-pagination.is-background .el-pager li:not(.disabled).active{ background-color: #2974FF;}
  /deep/ .el-pagination.is-background .el-pager li:not(.disabled).active:hover {color: #fff;}
  /deep/ .el-pagination.is-background .el-pager li:not(.disabled):hover {color: #2974FF;}
  /deep/ .el-pager li{ border-radius: 14px !important; background: rgba(255, 255, 255, 1); border: 1px rgba(167, 167, 167, 0.3) solid;}
  /deep/ .btn-prev{ border-radius: 14px !important; padding: 0 10px;}
  /deep/ .btn-next{ border-radius: 14px !important; padding: 0 10px;}
</style>
